<template>
<div class="test-app">
  <ul>
    <li style="--i: 6"><a href="#">Home</a></li>
    <li style="--i: 5"><a href="#">About</a></li>
    <li style="--i: 4"><a href="#">Services</a></li>
    <li style="--i: 3"><a href="#">Price</a></li>
    <li style="--i: 2"><a href="#">Our Team</a></li>
    <li style="--i: 1"><a href="#">Contact</a></li>
  </ul>
</div>
</template>

<script setup>
import { computed, onMounted, ref, watch } from 'vue';
</script>

<style lang="scss" scoped>
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  font-size: sans-serif;
}
.test-app {
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 100vh;
  // background: #424345;
}
ul {
  position: relative;
  transform: skewY(-15deg);

  li {
    position: relative;
    list-style: none;
    width: 200px;
    background: #3e3f46;
    padding: 15px;
    z-index: var(--i);
    transition: 0.5s;
    cursor: pointer;

    &::before {
      content: '';
      position: absolute;
      top: 0;
      left: -40px;
      width: 40px;
      height: 100%;
      background: #35383e;
      transform-origin: right;
      transform: skewY(45deg);
      transition: 0.5s;
    }

    &::after {
      content: '';
      position: absolute;
      top: -40px;
      left: 0;
      width: 100%;
      height: 40px;
      background: #35383e;
      transform-origin: bottom;
      transform: skewX(45deg);
      transition: 0.5s;
    }

    &:hover {
      background: #33a3ee;
      transform: translateX(50px);

      &::before {
        background: #2982b9;
      }

      &::after {
        background: #1f5378;
      }
    }

    a {
      text-decoration: none;
      color: #ccc;
      display: block;
      text-transform: uppercase;
      letter-spacing: 0.05em;
      transition: 0.5s;

      &:hover {
        color: #fff;
      }
    }

    &:last-child {
      &::after {
        box-shadow: -100px 100px 20px rgba(0, 0, 0, 0.25);
      }
    }
  }
}
</style>
